<script lang="ts" setup>
//品牌
import useGet from "@/store/get";
import { computed } from "vue";
//实例化store
const store = useGet();

//通过计算拿到值
const data = computed(() => {
  //无值返回undefined，有则返回
  return store.option?.single?.featured;
});
</script>

<template>
  <aside class="footertile" v-if="data">
    <a href="data.link" target="_blank" class="block">
      <div class="footertile-copy">
        <el-image :src="data.logo" fit="cover" class="logo"> </el-image>

        <p class="footertile-copy-headline">
          {{ data.msg }}
        </p>

        <el-link
          :underline="false"
          :href="data.link"
          target="_blank"
          class="footertile-copy-cta block-link"
        >
          了解更多
        </el-link>
      </div>
    </a>
  </aside>
  <div v-else>
    <el-skeleton animated :throttle="500">
      <template #template>
        <aside class="footertile">
          <div target="_blank" class="block">
            <div class="footertile-copy">
              <el-skeleton-item
                variant="image"
                style="width: auto; height: 100%"
              />

              <p class="footertile-copy-headline">
                <el-skeleton-item variant="p" style="width: 150px" />
              </p>

              <div class="footertile-copy-cta block-link">
                <el-skeleton-item variant="button" style="width: 100px" />
              </div>
            </div>
          </div>
        </aside>
      </template>
    </el-skeleton>
  </div>
</template>

<style lang="less" scoped>
.footertile {
  position: relative;
  width: 100%;
  background-color: #fbfbfd;
}

.footertile {
  margin-top: 80px;
}

.block {
  box-sizing: border-box;
  display: block;
  cursor: pointer;
  text-decoration: none;
  color: inherit;

  text-align: center;
  .footertile-copy-cta.block-link {
    border-radius: 30px;
    display: inline-block;
    transition: background-color 300ms cubic-bezier(0.4, 0, 0.25, 1) 0ms,
      border-color 300ms cubic-bezier(0.4, 0, 0.25, 1) 0ms,
      color 300ms cubic-bezier(0.4, 0, 0.25, 1) 0ms;
    font-size: 14px;
    line-height: 1.42859;
    font-weight: 700;
    letter-spacing: -0.016em;
    padding: 8px 16px;
    background: #e8e8ed;
    color: #161617;
  }

  .footertile-copy-cta.block-link {
    margin-top: 18px;
    cursor: pointer;
  }
}
.block::before,
.block::after {
  content: " ";
  display: table;
}

.footertile-copy {
  margin: 52px auto;
  width: 653px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .logo {
    width: 158px;
    height: 23px;
  }
}

.footertile-copy-headline {
  margin-top: 12px;
  font-size: 19px;
  line-height: 1.21053;
  font-weight: 700;
  letter-spacing: 0.012em;
  color: @font-color-assist;
  text-align: center;
}
@media only screen and (max-width: 1068px) {
  .footertile {
    margin-top: 64px;
  }
  .footertile-copy {
    margin: 48px auto;
    width: 576px;
  }
  .footertile-copy-headline {
    font-size: 17px;
    line-height: 1.23536;
    font-weight: 700;
  }
}
@media only screen and (max-width: 734px) {
  .footertile {
    margin-top: 52px;
    .block {
      max-width: 414px;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
  }
  .footertile-copy {
    margin: 44px auto;
    width: 87.5%;
  }
}
</style>
